import React from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import A from './pages/A'
import B from './pages/B'
export default function App() {
  return (
    <div>
      <Link to="/home">首页</Link>
      <Link to="/about">关于</Link>
      <hr />
      {/* 注意: 前端路由规则配置代码写在哪里,未来要切换的视图就渲染在哪里 */}
      <Routes>
        {/* 注意:一级路由的Route配置在哪里,则对应组件的结构渲染到哪里 */}
        <Route path="home" element={<Home></Home>}>
          {/* 按照react-router-dom的语法要求,嵌套路由的Route必须写在自己父级的子节点位置 */}
          <Route path="a" element={<A></A>}></Route>
          <Route path="b" element={<B></B>}></Route>
        </Route>
        <Route path="about" element={<About></About>}></Route>
      </Routes>
      <hr />
    </div>
  )
}
